<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户列表练习</title>
</head>
<body>
    <table border="1">
        <caption>用户列表</caption>
        <tr>
            <th>同户名</th>
            <th>密码</th>
            <th>昵称</th>
        </tr>
    </table>
    <script>
        let arr = [
            {username:"tom",password:123456,nickname:"汤姆"},
            {username:"jerry",password:123456,nickname:"杰瑞"},
            {username:"lucy",password:123456,nickname:"路西"}
        ]
        
        // 获取表格
        let table = document.querySelector("table")
        // 遍历数组
        for (let p of arr) {
            // 创建tr和td
            let tr = document.createElement("tr")
            let usernameTd = document.createElement("td")
            let passwordTd = document.createElement("td")
            let nicknameTd = document.createElement("td")
            // 将数据存入td
            usernameTd.innerText = p.username;
            passwordTd.innerText = p.password;
            nicknameTd.innerText = p.nickname;
             // 将td存入tr中
            tr.append(usernameTd,passwordTd,nicknameTd)
            // 将td存入table
            table.append(tr)
            // 将table存入页面
            document.body.append(table)
        }
    </script>
</body>
</html>